<template>
    <div class="header">
        <el-dropdown trigger="click">
        <button class="name">{{name}} <el-icon><CaretBottom /></el-icon></button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item><el-icon><Lock /></el-icon><router-link :to="{name:'changepassword'}">修改密码</router-link></el-dropdown-item>
            <el-dropdown-item><i class="fa fa-sign-out"></i><div @click="out">退出</div></el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
</template>


<script >
import { ElMessage } from "element-plus";

export default {
    data() {
        return {
            name:'xxx'
        }
    },
    methods:{
        out(){
            sessionStorage.removeItem("staff");
            sessionStorage.clear();
            ElMessage({type: 'success', message: "退出登陆"});
            this.$router.push({
                name: "login",
            });
        }
    },
    mounted(){
        this.name=JSON.parse(sessionStorage.getItem('staff')).name;
    }
}
</script>

<style>
a{
    text-decoration: none;
    color: #333333;
}
.header{
    background-color:#fff;
    color: #484848;
    height: 60px;
    padding: 0;
    display: flex;
    justify-content: end;
    box-shadow: 0px 0px 10px #ccc;
}
button , .name{
    margin-right: 10px;
    font-size: 18px;
    line-height:28px;
    width: 90px;
    border: none; 
    background-color: #fff;
    color: #484848;
}
.name:hover{
    background-color: #ededed ;
}
.el-popper__arrow{
    display: none !important;
}
.el-dropdown-menu__item:not(.is-disabled):hover{
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 0px  !important;
}
.el-dropdown-menu__item:not(.is-disabled):focus{
  background-color: #e6e6e6 !important;
  color: #333333 !important;
}
</style>

